<!-- 车辆 添加/编辑/查看 组件 -->
<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-row v-if="!readonly" style="margin-bottom: 15px; color: red;">
        <a><i class="el-icon-warning-outline"></i> 请如实填写，注意 <i style="color: black;" class="el-icon-question"></i> 中的内容，应填尽填。填写不规范将影响省平台的接入!</a>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车辆牌照号" prop="vehicleNumber">
            <el-input v-model="form.vehicleNumber" placeholder="请输入车辆牌照号" :readonly="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌颜色" prop="vehiclePlateColorCode">
            <el-select v-model="form.vehiclePlateColorCode" placeholder="请选择车牌颜色" style="width: 100%;" :disabled="readonly">
              <el-option
                v-for="item in vehiclePlateColorOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车辆类型" prop="vehicleType">
            <el-select v-model="form.vehicleType" filterable placeholder="请选择车辆类型" @change="vehicleTypeChange" style="width: 100%;" :disabled="readonly">
              <el-option
                v-for="item in vehicleTypeOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆能源类型" prop="vehicleEnergyType">
            <el-select v-model="form.vehicleEnergyType" placeholder="请选择车辆能源类型" style="width: 100%;" :disabled="readonly">
              <el-option
                v-for="item in vehicleEnergyTypeOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
                <span style="float: left">{{ item.dictLabel }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.remark }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="核定载质量(千克)" prop="vehicleTonnage">
            <el-input-number v-model="form.vehicleTonnage" :precision="2" :min="0.1" :step="0.1" :disabled="readonly"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="吨位(千克)" prop="grossMass">
            <el-input-number v-model="form.grossMass" :precision="2" :min="0.1" :step="0.1" :disabled="readonly"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所有人" prop="owner">
            <span slot="label">
              所有人
              <el-tooltip effect="dark" placement="top" content="总质量4.5吨及以下普通货运车辆必填">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-input v-model="form.owner" placeholder="请输入所有人" :readonly="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="使用性质" prop="useCharacter">
            <span slot="label">
              使用性质
              <el-tooltip effect="dark" placement="top" content="总质量4.5吨及以下普通货运车辆必填">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-input v-model="form.useCharacter" placeholder="请输入使用性质" :readonly="readonly" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车辆识别代号" prop="vin">
            <span slot="label">
              车辆识别代号
              <el-tooltip effect="dark" placement="top" content="总质量4.5吨及以下普通货运车辆必填">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-input v-model="form.vin" placeholder="请输入车辆识别代号" :readonly="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册日期" prop="registerDate">
            <span slot="label">
              注册日期
              <el-tooltip effect="dark" placement="top" content="总质量4.5吨及以下普通货运车辆必填">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-date-picker clearable :disabled="readonly"
              style="width: 100%;"
              v-model="form.registerDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择注册日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="发证机关" prop="issuingOrganizations">
            <span slot="label">
              发证机关
              <el-tooltip effect="dark" placement="top" content="总质量4.5吨及以下普通货运车辆必填">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-input v-model="form.issuingOrganizations" placeholder="请输入发证机关" :readonly="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发证日期" prop="issueDate">
            <span slot="label">
              发证日期
              <el-tooltip effect="dark" placement="top" content="总质量4.5吨及以下普通货运车辆必填">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-date-picker clearable :disabled="readonly"
              style="width: 100%;"
              v-model="form.issueDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择发证日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="道路运输证号" prop="roadTransportCertificateNumber">
            <span slot="label">
              道路运输证号
              <el-tooltip effect="dark" placement="top" content="总质量4.5吨及以下普通货运车辆的，可填“车籍地6位行政区域代码+000000”">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-input v-model="form.roadTransportCertificateNumber" placeholder="请输入道路运输证号" :readonly="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- <el-form-item label="速记码" prop="shortCode">
            <el-input v-model="form.shortCode" placeholder="请输入速记码" :readonly="readonly" />
          </el-form-item> -->
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="行驶证主页">
            <el-image class="image-slot" :src="form.xsCardImg1" fit="fit" :preview-src-list="srcList" @click="preview(form.xsCardImg1)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行驶证副页">
            <el-image class="image-slot" :src="form.xsCardImg2" fit="fit" :preview-src-list="srcList" @click="preview(form.xsCardImg2)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="道路运输证">
            <el-image class="image-slot" :src="form.dlImg" fit="fit" :preview-src-list="srcList" @click="preview(form.dlImg)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footerr">
      <el-button v-if="!readonly" type="primary" :disabled="disabled" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">{{ readonly ? '关 闭' : '取 消' }}</el-button>
    </div>
  </div>
</template>

<script>
import { getVehicle, addVehicle, updateVehicle } from "@/api/tws/vehicle";
import { getShortCode } from "@/api/tws/utils";

export default {
  name: 'VehicleForm',
  components: {
  },
  props: {
    // 模式：1新增 2修改 3查看
    mode: {
      type: String,
      default: '3'
    },
    vehicleId: {
      type: String
    }
  },
  data() {
    // 车牌验证
    const carno = (rule, value, callback) => {
      if(rule.required) {
        if(value=='') callback(new Error('请输入车牌号码'));
      }
      var myreg=/(^$)|^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/;
      if (!myreg.test(value,)) {
        callback(new Error('请输入正确的车牌号码'));
      } else {
        callback();
      }
    }
    return {
      readonly: true,
      disabled: false,
      // 车牌颜色字典
      vehiclePlateColorOptions: [],
      // 车辆能源类型字典
      vehicleEnergyTypeOptions: [],
      // 车辆类型字典
      vehicleTypeOptions: [],
      // 图片预览
      srcList: [],
      // 1牵引车 2挂车
      qg: null,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        vehicleNumber: [
          { required: true, message: "车辆牌照号不能为空", trigger: "blur" },
          { validator: carno, trigger: "blur" }
        ],
        vehiclePlateColorCode: [
          { required: true, message: "车牌颜色代码不能为空", trigger: "blur" }
        ],
        vehicleType: [
          { required: true, message: "车辆类型代码不能为空", trigger: "change" }
        ],
        vehicleEnergyType: [
          { required: true, message: "车辆能源类型不能为空", trigger: "change" }
        ],
        vehicleTonnage: [
          { required: true, message: "核定载质量(千克)不能为空", trigger: "blur" }
        ],
        grossMass: [
          { required: true, message: "吨位(千克)不能为空", trigger: "blur" }
        ],
        roadTransportCertificateNumber: [
          { required: true, message: "道路运输证号不能为空", trigger: "blur" }
        ]
      }
    };
  },
  watch: {
    mode: function(newData, oldData) {
      if(newData) {
        if(newData == '1' || newData == '2') {
          this.readonly = false;
        } else {
          this.readonly = true;
        }
      }
    },
    vehicleId: function(newData, oldData) {
      this.reset();
      this.srcList = [];
      if(newData) {
        getVehicle(newData).then(response => {
          this.form = response.data;
          // 默认填充一张图片
          if(this.form.xsCardImg1) {
            this.srcList.push(this.form.xsCardImg1);
          }
        });
      }
    }
  },
  created() {
    this.getDict();
  },
  methods: {
    /** 查询字典 */
    getDict() {
      // 车牌颜色字典
      this.getDicts("vehicle_plate_color").then(response => {
        this.vehiclePlateColorOptions = response.data;
      });
      // 车辆能源类型字典
      this.getDicts("vehicle_energy_type").then(response => {
        this.vehicleEnergyTypeOptions = response.data;
      });
      // 车辆类型字典
      this.getDicts("vehicle_type").then(response => {
        this.vehicleTypeOptions = response.data;
      });
    },
    // 求助记码
    getCode() {
      if(this.form.driverName != undefined && this.form.driverName != ""){
        getShortCode(this.form.driverName).then(res => {
          this.form.code = res.msg;
        });
      }
    },
    // 牵引车或挂车
    vehicleTypeChange(val) {
      var abc = this.selectDictLabel(this.vehicleTypeOptions, val);
      if(abc.indexOf("牵引车") != -1) {
        this.qg = 1;
      } else if(abc.indexOf("挂车") != -1) {
        this.qg = 2;
      }
    },
    // 图片预览
    preview(url) {
      this.srcList = [];
      if(url) {
        this.srcList.push(url)
      }
    },
    // 取消按钮
    cancel() {
      this.huidiao();
    },
    huidiao() {
      this.reset();
      this.$emit("close");
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        vehicleNumber: null,
        vehiclePlateColorCode: null,
        vehicleType: null,
        vehicleEnergyType: null,
        vehicleTonnage: null,
        grossMass: null,
        roadTransportCertificateNumber: null,
        shortCode: null,
        driverId: null,
        owner: null,
        useCharacter: null,
        vin: null,
        trailerVehiclePlateNumber: null,
        trailerVehiclePlateColorCode: null,
        issuingOrganizations: null,
        registerDate: null,
        issueDate: null,
        isCert: '0',
        state: '1',
        xsCardImg1: '',
        xsCardImg2: '',
        dlImg: '',
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
      };
      this.resetForm("form");
      this.qg = null;
    },
    /** 提交按钮 */
    submitForm() {
      this.disabled = true;
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(this.form.vehicleTonnage > this.form.grossMass) {
            this.$modal.msgWarning("车辆核载不可大于吨位");
            this.disabled = false;
            return;
          }
          if (this.form.id != null) {
            if(this.form.isCert != this.$store.state.constants.isCert_yrz) {
              this.form.isCert = this.$store.state.constants.isCert_shz;
            }
            updateVehicle(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.disabled = false;
              this.huidiao();
            }).catch(err => {
              this.disabled = false;
            })
          } else {
            this.form.isCert = this.$store.state.constants.isCert_shz;
            addVehicle(this.form).then(response => {
              let msgg = '';
              if(this.qg) {
                if(this.qg == 1) {
                  msgg = '，您新增的是牵引车，请及时维护挂车信息';
                } else if(this.qg == 2) {
                  msgg = '，您新增的是挂车，请及时维护牵引车信息';
                }
              }
              if(msgg) {
                this.$alert('新增成功' + msgg, '提示', {
                  confirmButtonText: '确定'
                }).catch(() => {
                })
              } else {
                this.$modal.msgSuccess("提交成功，请等待审核");
              }
              this.disabled = false;
              this.huidiao();
            }).catch(err => {
              this.disabled = false;
            })
          }
        } else {
          this.disabled = false;
        }
      });
    }
  }
};
</script>

<style>
  .select {
    width: 100%;
  }
  .dialog-footerr {
    text-align: center;
  }
  .image-slot {
    width: 160px;
    height: 160px;
    background: #F5F7FA;
  }
  .el-icon-picture-outline {
    display: block;
    text-align: center;
    line-height: 160px;
  }
</style>
